<template>
  <div class="info">
    <div class="f-title">
      <van-nav-bar title="用户反馈页面" right-text="历史反馈" left-arrow @click-left="$router.back()" @click-right="$router.push('/historyfeedback')" />
    </div>

    <h2>热门问题</h2>

    <div class="choose">
      <div class="left" @click="switchchoose1" v-if="num == 2">功能建议</div>
      <div class="left" @click="switchchoose1" v-if="num == 1" :class="'active'">功能建议</div>
      <div class="right" @click="switchchoose2" v-if="num == 1">性能问题</div>
      <div class="right" @click="switchchoose2" v-if="num == 2" :class="'active'">性能问题</div>
    </div>

    <h2>反馈标题</h2>

    <div class="f-text">
      <div class="text-cont">
        <input type="text" v-model="submitinfo.feedbackText" placeholder="请提出你的宝贵意见~" />
      </div>
      <van-uploader :after-read="afterRead" />
    </div>

    <h2>您的联系方式</h2>

    <div class="f-text1">
      <div class="text-cont">
        <input type="text" v-model="submitinfo.feedbackPhone" placeholder="手机号码/邮箱" />
      </div>
    </div>

    <div class="submit" @click="submit">提交反馈</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      historyArr: [],
      submitinfo: {
        feedbackType: '功能建议',
        feedbackText: '',
        feedbackTime: '',
        feedbackPhone: null
      }
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    submit() {
      if (this.submitinfo.feedbackText != '') {
        this.$toast.success('提交成功')
      } else {
        this.$toast.fail('请填写完整反馈')
      }

      let thisTime = new Date()

      let y = thisTime.getFullYear()
      let m = thisTime.getMonth()
      let d = thisTime.getDate()

      this.submitinfo.feedbackTime = `${y}-${m + 1}-${d}`

      let str = localStorage.getItem('loca')
      if (str == null) {
        this.historyArr.push(this.submitinfo)
      } else {
        let feedbackArr = JSON.parse(str)
        this.historyArr.push(this.submitinfo)
        this.historyArr = [...this.historyArr, ...feedbackArr]
      }

      let cache = JSON.stringify(this.historyArr)
      localStorage.setItem('loca', cache)

      this.$router.push('/historyfeedback')
    },
    switchchoose1() {
      this.num = 1
      this.submitinfo.feedbackType = '功能建议'
      console.log(this.submitinfo.feedbackType)
    },
    switchchoose2() {
      this.num = 2
      this.submitinfo.feedbackType = '性能问题'
      console.log(this.submitinfo.feedbackType)
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  background-color: #fafafa;

  h2 {
    padding: 12px 10px;
    font-size: 17px;
    color: #777777;
  }

  .choose {
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left {
      width: 80px;
      height: 55px;
      border: 1px solid #ddd;
      border-radius: 5px;
      text-align: center;
      line-height: 55px;
      font-size: 12px;
    }

    .right {
      width: 80px;
      height: 55px;
      border: 1px solid #ddd;
      border-radius: 5px;
      text-align: center;
      line-height: 55px;
      font-size: 12px;
    }

    .active {
      width: 80px;
      height: 55px;
      border: 1px solid #2e96ff;
      color: skyblue;
      border-radius: 5px;
      text-align: center;
      line-height: 55px;
      font-size: 12px;
    }
  }

  .f-text {
    height: 230px;
    background-color: white;
    padding: 10px;

    .text-cont {
      height: 130px;

      input {
        background: none;
        outline: none;
        border: none;
      }
    }
  }

  .f-text1 {
    height: 60px;
    background-color: white;

    .text-cont {
      height: 60px;
      padding: 10px;

      input {
        width: 100%;
        height: 100%;
        background: none;
        outline: none;
        border: none;
      }
    }
  }

  .submit {
    height: 60px;
    width: 100%;
    text-align: center;
    line-height: 60px;
    background-color: black;
    color: white;
    font-size: 18px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

/deep/ .van-nav-bar__content {
  height: 38px;
  border-bottom: 2px solid #ddd;
}

/deep/ .van-nav-bar__text,
/deep/.van-nav-bar__title {
  color: #d50000;
}
/deep/.van-nav-bar__text {
  font-size: 12px;
}

/deep/ .van-cell {
  font-size: 16px;
  font-weight: 600;
  padding: 12px 10px;
}

/deep/ .van-nav-bar .van-icon {
  color: #ddd;
}
</style>
